<template>
  <el-container min-w-screen min-h-screen>
    <SideMenu :isCollapse="isCollapsed" v-if="!layoutStore.fullScreen" />
    <el-container max-h-screen v-bind="layoutStore.layoutDirection" style="flex-direction: column !important">
      <el-header flex items-center border-b v-if="!layoutStore.fullScreen">
        <section flex flex-1 items-center>
          <CollapseToggle v-model="isCollapsed" />
          <div w-5 />
          <RouteBox />
        </section>
        <Profile />
      </el-header>
      <section flex border-b items-center v-if="routeHistoryStore.historySet.length">
        <div flex-1>
          <NavBox />
        </div>
        <div flex items-center p="x-3">
          <div flex items-center cursor-pointer @click="layoutStore.setFullScreen(!layoutStore.fullScreen)">
            <el-icon><FullScreen /></el-icon>
          </div>
        </div>
      </section>
      <el-main h-full overflow-scroll>
        <RouterView>
          <template #default="{ Component, route }">
            <transition name="route" mode="out-in" appear>
              <component :is="Component" :key="route.fullPath" />
            </transition>
          </template>
        </RouterView>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import SideMenu from '../SideMenu/index.vue'
import CollapseToggle from '../components/CollapseToggle/index.vue'
import RouteBox from '../components/RouteBox/index.vue'
import NavBox from '../components/NavBox/index.vue'
import Profile from '../components/Profile/index.vue'
import { useLayoutStore } from '@/stores/modules/layout'
import { useRouteHistoryStore } from '@/stores/modules/routeHistory'

const layoutStore = useLayoutStore()
const routeHistoryStore = useRouteHistoryStore()

defineComponent({
  SideMenu,
  CollapseToggle,
  RouteBox,
  NavBox,
  Profile,
})
const isCollapsed = ref(false)
</script>

<style scoped></style>
